<template>
  <div class="configuration-form">
    <div class="section" :class="{ fold: foldStatus.title }">
      <div class="panel-title" @click="toggleFold('title')">
        内容 <a-icon-font class="btn-panel" type="iconicon-beifen" />
      </div>
      <a-row class="panel-item">
        <a-col :span="labelCol">标题:</a-col>
        <a-col :span="wrapperCol">
          <a-input
            :value="formData.title"
            v-bind="commonFormProps"
            :max-length="50"
            @change="(event) => onFormValueChange('title', event.target.value)"
          />
        </a-col>
      </a-row>
      <!-- <a-row class="panel-item">
        <a-col :span="labelCol">标题栏:</a-col>
        <a-col :span="wrapperCol">
          <a-switch 
            :checked="formData.titleIsShow"
            v-bind="commonFormProps"
            @change="(value) => onFormValueChange('titleIsShow', value)"
          />
        </a-col>
      </a-row> -->
    </div>
    <div class="section" :class="{ fold: foldStatus.editable }">
      <div class="panel-title" @click="toggleFold('normal')">
        可编辑参数 <a-icon-font class="btn-panel" type="iconicon-beifen" />
      </div>
      <div v-for="item in editableParams" :key="item.name" class="panel-item">
        <div class="panel-item-title">
          {{ item.name }}
          <span class="btns">
            <span title="可编辑" class="btn active btn-edit"
              ><a-icon-font type="iconicon-beifen6-copy-copy"
            /></span>
            <span
              title="不可编辑"
              class="btn btn-unedit"
              @click="toggleParamsStatus(item, 'disable')"
              ><a-icon-font type="iconbianjizhibeifen"
            /></span>
            <span
              title="隐藏"
              class="btn btn-hide"
              @click="toggleParamsStatus(item, 'hide')"
              ><a-icon-font type="icontufenxi-guanbigailan"
            /></span>
          </span>
        </div>
        <div class="panel-sub-item">
          <a-row class="panel-item">
            <a-col :span="labelCol">名称:</a-col>
            <a-col :span="wrapperCol">
              <a-input
                :value="item.label"
                v-bind="commonFormProps"
                :max-length="50"
                @change="
                  (event) =>
                    onPanelItemValueChange(item, 'label', event.target.value)
                "
              />
            </a-col>
          </a-row>
          <a-row
            v-if="['number', 'int'].includes(item.type)"
            class="panel-item"
          >
            <a-col :span="12">幅度调整单位:</a-col>
            <a-col :span="10">
              <a-input-number
                :value="item.step"
                v-bind="commonFormProps"
                @change="(value) => onPanelItemValueChange(item, 'step', value)"
              />
            </a-col>
            <a-col :span="2" style="text-align: center;">%</a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="section" :class="{ fold: foldStatus.disable }">
      <div class="panel-title" @click="toggleFold('disable')">
        不可编辑参数 <a-icon-font class="btn-panel" type="iconicon-beifen" />
      </div>
      <div v-if="disableParams.length === 0" class="empty-info">暂 无</div>
      <div
        v-for="item in disableParams"
        v-else
        :key="item.name"
        class="panel-item"
      >
        <div class="panel-item-title">
          {{ item.name }}
          <span class="btns">
            <span
              title="可编辑"
              class="btn btn-edit"
              @click="toggleParamsStatus(item, 'normal')"
              ><a-icon-font type="iconicon-beifen6-copy-copy"
            /></span>
            <span title="不可编辑" class="btn active btn-unedit"
              ><a-icon-font type="iconbianjizhibeifen"
            /></span>
            <span
              title="隐藏"
              class="btn btn-hide"
              @click="toggleParamsStatus(item, 'hide')"
              ><a-icon-font type="icontufenxi-guanbigailan"
            /></span>
          </span>
        </div>
        <div class="panel-sub-item">
          <a-row class="panel-item">
            <a-col :span="labelCol">名称:</a-col>
            <a-col :span="wrapperCol">
              <a-input
                :value="item.label"
                v-bind="commonFormProps"
                :max-length="50"
                @change="
                  (event) =>
                    onPanelItemValueChange(item, 'label', event.target.value)
                "
              />
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="section" :class="{ fold: foldStatus.hide }">
      <div class="panel-title" @click="toggleFold('hide')">
        隐藏参数 <a-icon-font class="btn-panel" type="iconicon-beifen" />
      </div>
      <div v-if="hideParams.length === 0" class="empty-info">暂 无</div>
      <div
        v-for="item in hideParams"
        v-else
        :key="item.name"
        class="panel-item"
      >
        <div class="panel-item-title">
          {{ item.name }}
          <span class="btns">
            <span
              title="可编辑"
              class="btn btn-edit"
              @click="toggleParamsStatus(item, 'normal')"
              ><a-icon-font type="iconicon-beifen6-copy-copy"
            /></span>
            <span
              title="不可编辑"
              class="btn btn-unedit"
              @click="toggleParamsStatus(item, 'disable')"
              ><a-icon-font type="iconbianjizhibeifen"
            /></span>
            <span title="隐藏" class="btn active btn-hide"
              ><a-icon-font type="icontufenxi-guanbigailan"
            /></span>
          </span>
        </div>
        <div class="panel-sub-item">
          <a-row class="panel-item">
            <a-col :span="labelCol">名称:</a-col>
            <a-col :span="wrapperCol">
              <a-input
                :value="item.label"
                v-bind="commonFormProps"
                :max-length="50"
                disabled
              />
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/* eslint-disable unicorn/prevent-abbreviations */
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
import { IKeyValue } from '@/components/common/VisualizationDashboard/interface'

interface IParamItem {
  name: string
  value: any
  type: string
  default: any
  english_name: string
  tips: string
  label: string
  step?: number
  status: 'normal' | 'disable' | 'hide'
}

@Component
export default class ConfigurationForm extends Vue {
  @Prop({ default: () => ({}) }) formData!: IKeyValue

  private foldStatus = {
    // 折叠状态
    normal: false,
    disable: false,
    hide: false,
    title: false,
  }

  private labelCol: number = 8
  private wrapperCol: number = 16
  private commonFormProps = {
    size: 'small',
  }

  @Watch('formData')
  private onFormDataChange() {
    console.log('onFormDataChange')
  }

  /**
   * 可编辑参数
   */
  public get editableParams() {
    const { params = [] } = this.formData
    return params
      .filter((item: IParamItem) => {
        return item.status === 'normal'
      })
      .map((item: IParamItem) => {
        return {
          ...item,
          step: item.step || 1,
          label: item.label || item.name,
        }
      })
  }

  /**
   * 不可编辑参数
   */
  public get disableParams() {
    const { params = [] } = this.formData
    return params
      .filter((item: IParamItem) => {
        return item.status === 'disable'
      })
      .map((item: IParamItem) => {
        return {
          ...item,
          step: item.step || 1,
          label: item.label || item.name,
        }
      })
  }

  /**
   * 隐藏参数
   */
  public get hideParams() {
    const { params = [] } = this.formData
    return params
      .filter((item: IParamItem) => {
        return item.status === 'hide'
      })
      .map((item: IParamItem) => {
        return {
          ...item,
          step: item.step || 1,
          label: item.label || item.name,
        }
      })
  }

  /**
   * 折叠状态
   */
  public toggleFold(key: 'normal' | 'disable' | 'hide') {
    this.foldStatus[key] = !this.foldStatus[key]
  }

  /**
   * 切换参数状态
   */
  public toggleParamsStatus(
    target: IParamItem,
    status: 'normal' | 'disable' | 'hide'
  ) {
    const normalList = this.formData.params.filter(
      (item: IParamItem) => item.status === 'normal'
    )
    if (normalList.length === 1 && normalList[0].name === target.name) {
      this.$message.warning('可编辑参数至少保留1个')
      return
    }
    this.formData.params.forEach((item: IParamItem) => {
      if (item.name === target.name) {
        item.status = status
      }
    })
    this.$emit('change', {
      ...this.formData,
    })
  }

  private onFormValueChange(fieldName: string, fieldValue: any) {
    this.$emit('change', {
      // ...this.formData,
      [fieldName]: fieldValue,
    })
  }

  /**
   * 参数的具体子项，如 名称、步长等
   */
  private onPanelItemValueChange(
    target: IParamItem,
    fieldName: string,
    fieldValue: any
  ) {
    if (['', undefined, null, Number.NaN].includes(fieldValue)) {
      return
    }
    this.formData.params.forEach((item: any) => {
      if (item.name === target.name) {
        item[fieldName] = fieldValue
      }
    })
    this.$emit('change', {
      ...this.formData,
    })
  }
}
</script>

<style lang="less" scoped>
.configuration-form {
  .panel-title {
    color: #5d637e;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    height: 36px;
    line-height: 24px;
    line-height: 36px;
    position: relative;

    .btn-panel {
      position: absolute;
      right: 0;
      top: 11px;
      transform: rotate(180deg);
    }
  }

  .section {
    height: auto;

    .empty-info {
      height: 36px;
      line-height: 36px;
      text-align: center;
    }

    &.fold {
      height: 36px;
      overflow: hidden;

      .btn-panel {
        transform: rotate(0deg);
      }
    }
  }

  .panel-item {
    line-height: 24px;
    margin: 10px 0;
    padding-left: 12px;

    .panel-item-title {
      display: flex;
      justify-content: space-between;
    }

    .panel-sub-item {
      font-size: 12px;
      padding-left: 12px;
    }
  }

  .btns {
    display: flex;
    justify-content: right;
    width: 80px;

    .btn {
      align-items: center;
      border: 1px solid #e9e9e9;
      color: #a7a7a7;
      cursor: pointer;
      display: flex;
      font-size: 10px;
      height: 24px;
      justify-content: center;
      width: 24px;

      &.btn:first-child {
        border-radius: 2px 0 0 2px;
        margin-right: -1px;
      }

      &.btn:last-child {
        border-radius: 0 2px 2px 0;
        margin-left: -1px;
      }

      &.active {
        border-color: #6973ff;
        color: #6973ff;
        z-index: 9;
      }
    }
  }
}
</style>
